<template>
  <!-- 司机端APP分享 -->
	<view class="shareERcode">
		<u-navbar  title="APP分享"  :background="background" title-color="#FFF" back-icon-color="#fff"></u-navbar>
		<!-- 客户端 -->
		<view class="shareCon">
			<view class="share-title">
				<text>客户端APP分享</text>
			</view>
			<view class="share-link clearfix" >
				<text>复制链接分享：</text>
				<view class="" style="width: 300rpx;">
					<u-parse :selectable="true" :html="content" :tag-style="style"></u-parse>
				</view>
			</view>
			<view class="share-codePic clearfix">
				<view>二维码分享：</view>
				<view class="share-codePic-right clearfix">
					<view>
						<image :src="imgPathC" alt="">
					</view>
					<view class="shareButton">
						<button @click="saveC(0)">保存图片</button>
						<text class="buttonCenter"></text>
						<button @click='ban'>分享图片</button>
					</view>
				</view>
			</view>
		</view>
    <!-- 司机端 -->
  <!--  <view class="shareCon shareConDrive">
    	<view class="share-title">
    		<text>司机端APP分享</text>
    	</view>
    	<view class="share-link clearfix" >
    		<text>复制链接分享：</text>
    		<view class="" style="width: 300rpx;">
				<u-parse :selectable="true" :html="drivercontent" :tag-style="style"></u-parse>
    		</view>
    	</view>
    	<view class="share-codePic clearfix">
    		<view>二维码分享：</view>
    		<view class="share-codePic-right clearfix">
    			<view>
					<image :src="imgPathD" alt="">
    			</view>
    			<view class="shareButton">
    				<button @click="saveC(1)">保存图片</button>
    				<text class="buttonCenter"></text>
    				<button @click='ban'>分享图片</button>
    			</view>
    		</view>
    	</view>
    </view> -->
	<u-toast ref="uToast" />
  </view>
</template>

<script>
  export default {
    data() {
		return {
			background: {
				backgroundColor: '#00a1f1',
			},
			imgPathC:'/downCustomer.png',//客户端
			imgPathD:'/downDriver.png',//司机端
			content:'/customer.apk</div>',
			style:{
				div:'font-size: 30rpx;color: rgba(0, 161, 241, 1);word-break: break-all;white-space: normal;'
			},
			drivercontent: '/driver.apk</div>',
			
		}
	},
	onShow() {
		// <div>
		this.imgPathC=`${this.$imgbaseurl}${this.imgPathC}`
		this.imgPathD=`${this.$imgbaseurl}${this.imgPathD}`
		this.content=`<div>${this.$appdowmload}/${this.content}`
		this.drivercontent=`<div>${this.$appdowmload}/${this.drivercontent}`
	},
	methods:{
		saveC(e){
			var pathIMg;
			var that=this
			if(e == 0){
			  pathIMg = this.imgPathC
			}else{
			  pathIMg = this.imgPathD
			}
			plus.gallery.save( pathIMg, function () {
				that.$refs.uToast.show({
					title: '保存成功',
					type: 'default',
					icon:false
				})
			});
		},
		ban(){
			this.$refs.uToast.show({
				title: '功能暂未开放，敬请期待！！！',
				type: 'default',
				icon:false
			})
		}
	}
}
</script>

<style scoped>
	.shareERcode {
		width: 100%;
		overflow-x: hidden;
	}
	.shareButton{
		display: flex;
	}
	.clearfix:after {
		content: '';
		display: block;
		height: 0;
		visibility: hidden;
		clear: both;
	}

	.clearfix {
		zoom: 1;
	}

	/* 顶部导航栏 */
	.deliveryDetailsTop {
		width: 100%;
		height: 128rpx;
		display: flex;
		flex-direction: row;
		line-height: 160rpx;
		position: absolute;
		top: 0;
		left: 0;
		background: rgba(255, 255, 255, 1);
		color: rgba(51, 51, 51, 1);
	}

	.deliveryDetailsTop view:first-child {
		width: 10%;
		text-align: center;

	}

	.deliveryDetailsTop>view .iconarrow_left-copy {
		font-size: 46rpx;
		font-weight: 600;
	}

	.deliveryDetailsTop view:last-child {
		width: 90%;
		text-align: center;
		font-size: 40rpx;
		padding-right: 50rpx;
	}

	/*  */
	.shareCon {
		width: 100%;
		background: rgba(255, 255, 255, 1);
		padding: 0 40rpx;
		padding-top: 50rpx;
		padding-bottom: 60rpx;
	}
	/* .shareConDrive{
		margin-top: 20rpx !important;
	} */
	/* 司机端APP分享 */
	.share-title {
		width: 100%;
		font-size: 40rpx;
		color: rgba(51, 51, 51, 1);
		text-align: center;
	}

	/* 复制链接分享 */
	.share-link {
		display: flex;
		margin-top: 50rpx;
	}
	 .share-link text{
		 color: rgba(102, 102, 102, 1);
		 font-size: 30rpx;
	 }
	 .share-link view{
		 flex: 1;
	 }
	.share-link text:last-child a {
		font-size: 26rpx;
		font-weight: 500;
		color: rgba(0, 161, 241, 1);
		font-weight: 500;
		word-wrap: break-word;
	}
	.share-link view{
		display: inline-block;
	}
	/*扫描二维码分享  */
	.share-codePic {
		display: flex;
		width: 100%;
		margin-top: .56rem;
	}

	.share-codePic view:first-child {
		width: 35%;
		color: rgba(102, 102, 102, 1);
		font-size: 30rpx;
	}

	.share-codePic view:last-child {
		width: 70%;
	}

	.share-codePic image {
		width: 260rpx;
		height: 260rpx;
	}
	.share-codePic button::after{
		border: none;
	}
	.share-codePic button {
		width: 280rpx;
		border: 0 none;
		padding: 0;
		margin: 0;
		color: rgba(0, 161, 241, 1);
		font-size: 30rpx;
		border-radius: 0;
		background-color: #FFF;
	}
	.share-codePic-right view:first-child {
		width: 260rpx;
		height: 260rpx;
	}
	.share-codePic-right view:last-child {
		height: 70rpx;
		line-height: 70rpx;
		margin-top: 20rpx;
	}

	.buttonCenter {
		display: inline-block;
		background: rgba(204, 204, 204, 1);
		width: 5rpx;
		height: 70%;
		margin: 10rpx 20rpx 0;
	}
	.shareERcode .iconfont{
		font-size: 44rpx;
	}
	.share-text{
		width: 450rpx;
		position: relative;
		border:none;
		padding: 0;
		margin: 0;
		height: 100rpx;
		line-height: 26rpx;
		font-size: 32rpx;
		font-weight:500;
		color:rgba(0,161,241,1);
		overflow: hidden;
  }
</style>
